<template>
	<view class="content">
		<!-- <view class="remind">因成本问题~非会员暂不支持分析日记图片</view> -->
		<!-- html -->
		<html2canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish">
			<view id="poster">
				<div class="imgTitle">
					<div class="yearMonth">
						{{journal.year}}年  ,{{journal.month}}
					</div class="day">
					<div class="day">
						{{journal.day}}
					</div>
					<div class="weekTime">
						{{journal.week}}  {{journal.time}}
					</div>
				</div>
				<view class="journalCount">
					<rich-text :nodes="journal.journalContent"></rich-text>
				</view>
			</view>
			
		</html2canvas>
		<view id="share">
			<uni-icons type="pyq" size="20" color="#4a87b6" @click="saveImg">显示图像</uni-icons>
			
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<div style="width: 80%;height: 80vh;">
					<image :src="filePath" mode="aspectFit" style="height: 100%;"></image>
				</div>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { base64ToPath, pathToBase64 } from '@/utils/libs/image-tools.js';
import {shareJournal} from '@/api/journal.js';
export default {
	data() {
		return {
			title: 'Html2Canvas-Renderjs 示例',
			domId: '',
			logoBase64: '',
			filePath: '',
			journal:{
				"year": "2024",
				"month": "一月",
				"day": "22",
				"week": "星期一",
				"time": "23:59",
				"journalContent": ``,
				"number": "37546153932756",
				"title": "随笔dd"
			},
			imgPath:"",
			id:"",
			token:"",
			journalId:null
		}
	},
	async onLoad(e) {
		this.journalId = e.journalId
		this.getMessage()
		await this.getJournalData()
	},
	mounted() {
		this.domId = '#poster'
	},
	methods: {
		getMessage(){
			this.id=uni.getStorageSync("id"),
			this.token=uni.getStorageSync("authorization")
			
		},
		// 通过id获取数据
		async getJournalData(){
			await shareJournal({
				"token":this.token,
				"id":this.journalId
			}).then(res=>{
				this.journal = res.data.data
				
			})
		},
		
		/**
		* 保存图片到相册
		*/
		saveImg() {
		    this.$refs.alertDialog.open()
		},
		/**
		 * 渲染完毕接收图片
		 * @param {String} filePath
		 */
		async renderFinish(filePath) {
			this.filePath = filePath;
			console.log("filePath", filePath)
			
		}
	}
}
</script>

<style lang="scss">
	page{
		background-color: $bg-gary;
	}
	.content{
		#share{
			display: flex;
			justify-content: center;  
			align-items: center;  
			width: 20vh;
			height: 6vh;
			border-radius: 2vh;
			border: 1px solid $font-blue;
			position: fixed;
			bottom: 80rpx;  
			left: 30%;  
			
		}
		.remind{
			text-align: center;
			color: $font-blue;
		}
		.logo {
			height: 100vh;
			width: 80%;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}
		#poster{
			
			.imgTitle {
				width: 100%;
				
				height: 23vh;
				background-image: url("../../static/share.png");
				background-size: cover;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: white;
				font-size: 2vh;
				.day{
					font-size: 8vh;
				}
			}
			.journalCount{
				padding: 5vh;
			}
		}
	}

	
	
	


</style>
